<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:360px;
				height:400px;
				border:1px solid red;
				margin:0 auto;
			}
			#box .top{
				height:60px;
				background: yellow;
			}
			#box .top div{
				width:120px;
				height:60px;
				background: black;
				color:white;
				font:bold 32px/60px "微软雅黑";
				text-align: center;
				float:left;
			}
			#box .top div.active{
				background: crimson;
			}
			#box .content{
				height:340px;
				position:relative;
			}
			#box .content div{
				position:absolute;
				top:0;
				left:0;
				height:340px;
				width:360px;
				background: chartreuse;
				text-align: center;
				line-height: 340px;
				font-size:148px;
				color:white;
				display: none;	
			}
			#box .content .red{
				background: red;
			}
			#box .content .blue{
				background: blue;
			}
			#box .content .green{
				background: green;
			}
			#box .content .active{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="top">
				<div class="active">红色</div>
				<div>蓝色</div>
				<div>绿色</div>
			</div>
			<div class="content">
				<div class="red active">红色</div>
				<div class="blue">蓝色</div>
				<div class="green">绿色	</div>
			</div>
		</div>
		
		<script>
			window.onload = function(){
				var oBox = document.getElementById("box");
				var oTop = oBox.getElementsByClassName('top')[0];
				var btns = oTop.getElementsByTagName('div');
				
				var oContent = oBox.getElementsByClassName('content')[0];
				var oShows = oContent.getElementsByTagName('div');


//				btns[0].onclick = function(){
//					alert(1);
//				}
//				btns[1].onclick = function(){
//					alert(2);
//				}
//				btns[2].onclick = function(){
//					alert(3);
//				}
				var index = 0;
				for(var i=0;i<btns.length;i++){
//					创建自定义属性,绑定按钮的索引值
					btns[i].index = i;
					btns[i].onclick = function(){
//						1.操作上面按钮样式
						for(var j=0;j<btns.length;j++){
							btns[j].style.background = 'black';
						}
						this.style.background = 'crimson';

//						2.根据按钮的索引值,操作下面对应的div的显示和隐藏	
						for(var k=0;k<oShows.length;k++){
							oShows[k].style.display = 'none';
						}
						
						oShows[this.index].style.display = 'block';
					}
					
				}
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			}
		</script>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
